import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_pagewise/flutter_pagewise.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:loxen/mode/inspiration/inspiration_info_bean.dart';
import 'package:loxen/mode/inspiration/inspiration_style_bean.dart';
import 'package:loxen/routes/routes.dart';
import 'package:loxen/utils/config.dart';
import 'package:loxen/utils/string_res.dart';
import 'package:loxen/view/inspiration/inspiration_list.dart';
import 'package:loxen/view/inspiration/inspiration_tabbar.dart';
import 'package:loxen/viewmode/base_view_model.dart';
import 'package:loxen/viewmode/inspiration_list_viewmodel.dart';
import 'package:loxen/viewmode/search_result_viewmodel.dart';
import 'package:loxen/widget/empty_widget.dart';
import 'package:loxen/widget/fail_widget.dart';
import 'package:loxen/widget/loading_widget.dart';
import 'package:loxen/widget/my_subassembly.dart';
import 'package:provider/provider.dart';

class InspirationListWidget extends StatefulWidget {
  const InspirationListWidget({Key key}) : super(key: key);

  @override
  _InspirationListWidgetState createState() => _InspirationListWidgetState();
}

class _InspirationListWidgetState extends State<InspirationListWidget>
    with AutomaticKeepAliveClientMixin {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(95.h),
        child: Container(
          color: Theme.of(context).primaryColor,
          child: SafeArea(
            child: Row(
              children: <Widget>[
                MySubassembly.getSearchIcon(
                  () {
                    Navigator.of(context).pushNamed(Routes.search,
                        arguments: {'mType': SearchType.INSPIRATION, 'hintText': '输入文章标题或作者'});
                  },
                  width: 30.w,
                  height: 30.w,
                ),
                Expanded(
                  child: Selector<InspirationListViewModel, BaseState>(
                    builder: (_, data, __) {
                      if (data == BaseState.CONTENT) {
                        return InspirationTabBar();
                      } else {
                        return Constants.empty;
                      }
                    },
                    selector: (_, model) => model.mState,
                  ),
                ),
                Selector<InspirationListViewModel, BaseState>(
                  builder: (_, data, __) {
                    if (data == BaseState.CONTENT) {
                      return Container(
                        padding: EdgeInsets.only(left: 32.w, right: 32.w),
                        height: double.infinity,
                        decoration: BoxDecoration(
                            image: DecorationImage(
                                fit: BoxFit.fitWidth, image: AssetImage('images/bg_icon.png'))),
                        child: Center(
                          child: InkWell(
                            onTap: () {
                              InspirationStyleBean styleBean =
                                  Provider.of<InspirationListViewModel>(context, listen: false)
                                      .styleBean;
                              Style style =
                                  Provider.of<InspirationListViewModel>(context, listen: false)
                                      .style;
                              Navigator.of(context).pushNamed(Routes.inspiration_style,
                                  arguments: {"bean": styleBean, "style": style}).then((value) {
                                Provider.of<InspirationListViewModel>(context, listen: false)
                                    .changeStyle(value);
                              });
                            },
                            child: Selector<InspirationListViewModel, Style>(
                                shouldRebuild: (old, next) {
                                  return old != next;
                                },
                                builder: (context, style, __) {
                                  if (style == null) {
                                    return Text(
                                      StringResources.feng_ge,
                                      style: TextStyle(
                                          color: Theme.of(context).textTheme.subtitle1.color,
                                          fontSize: 31.sp),
                                    );
                                  } else {
                                    return Text(
                                      style.name,
                                      style: TextStyle(
                                          color: Theme.of(context).textTheme.subtitle1.color,
                                          fontSize: 31.sp),
                                    );
                                  }
                                },
                                selector: (_, model) => model?.style),
                          ),
                        ),
                      );
                    } else {
                      return Constants.empty;
                    }
                  },
                  selector: (_, model) => model.mState,
                ),
              ],
            ),
          ),
        ),
      ),
      body: Container(
        color: Theme.of(context).backgroundColor,
        child: Column(
          children: <Widget>[
            Selector<InspirationListViewModel, BaseState>(
              builder: (_, state, __) {
                if (state == BaseState.CONTENT) {
                  return Padding(
                    padding: EdgeInsets.only(left: 36.w, top: 10.h, bottom: 10.h),
                    child: InspirationTabBar2(),
                  );
                }
                return Text('');
              },
              selector: (_, model) => model.mState,
            ),
            Expanded(
              child: Selector<InspirationListViewModel, BaseState>(
                builder: (_, state, __) {
                  if (state == BaseState.LOADING) {
                    return LoadingWidget();
                  }
                  if (state == BaseState.CONTENT) {
                     return InspirationList();
                  }
                  if (state == BaseState.EMPTY) {
                    return EmptyWidget();
                  }
                  if (state == BaseState.FAIL) {
                    return FailWidget(
                      onClick: () {
                        context.read<InspirationListViewModel>().loadData();
                      },
                    );
                  }
                  return Text('');
                },
                selector: (_, model) => model.mState,
              ),
            )
          ],
        ),
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}
